<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
      }

      #box2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;

        left: 200px;
        top: 200px;
      }
    </style>

    <script type="text/javascript">
      window.onload = function () {
        /*
         * 拖拽box1元素
         *  - 拖拽的流程
         * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
         * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
         * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
         */

        //获取box1
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var img1 = document.getElementById('img1');

        //开启box1的拖拽
        drag(box1);
        //开启box2的
        drag(box2);

        drag(img1);
      };

      /*
       * 提取一个专门用来设置拖拽的函数
       * 参数：开启拖拽的元素
       */
      function drag(obj) {
        //当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
        obj.onmousedown = function (event) {
          //设置box1捕获所有鼠标按下的事件
          /*
           * setCapture()
           * 	- 只有IE支持，但是在火狐中调用时不会报错，
           * 		而如果使用chrome调用，会报错
           */
          /*if(box1.setCapture){
						box1.setCapture();
					}*/
          obj.setCapture && obj.setCapture();

          event = event || window.event;
          //div的偏移量 鼠标.clentX - 元素.offsetLeft
          //div的偏移量 鼠标.clentY - 元素.offsetTop
          var ol = event.clientX - obj.offsetLeft;
          var ot = event.clientY - obj.offsetTop;

          //为document绑定一个onmousemove事件
          document.onmousemove = function (event) {
            event = event || window.event;
            //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
            //获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY - ot;

            //修改box1的位置
            obj.style.left = left + 'px';
            obj.style.top = top + 'px';
          };

          //为document绑定一个鼠标松开事件
          document.onmouseup = function () {
            //当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
            //取消document的onmousemove事件
            document.onmousemove = null;
            //取消document的onmouseup事件
            document.onmouseup = null;
            //当鼠标松开时，取消对事件的捕获
            obj.releaseCapture && obj.releaseCapture();
          };

          /*
           * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
           * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
           * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
           *
           * 但是这招对IE8不起作用
           */
          return false;
        };
      }
    </script>
  </head>
  <body>
    我是一段文字

    <div id="box1"></div>

    <div id="box2"></div>

    <img src="img/an.jpg" id="img1" style="position: absolute" />
  </body>
</html>
